$(function() {
    $('#nav-list').on('click', 'a', function() {
        $(this).toggleClass('icon_turnoff')

    })
    var dataMonth = {
        xAxis: [
            '2016.11',
            '2016.12',
            '2017.1',
            '2017.2',
            '2017.3',
            '2017.4',
            '2017.5',
            '2017.6',
            '2017.7',
            '2017.8',
            '2017.9',
            '2017.10'
        ],
        seriesData: [
            {
                name: '处置数',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2
                ]
            }, {
                name: '报警数',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2
                ]
            }, {
                name: '处置率',
                type: 'line',
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2
                ]
            }
        ]

    } //12月份
    var dataDay = {
        xAxis: [
            '2017.9.1',
            '2017.9.2',
            '2017.9.3',
            '2017.9.4',
            '2017.9.5',
            '2017.9.6',
            '2017.9.7',
            '2017.9.8',
            '2017.9.9',
            '2017.9.10',
            '2017.9.11',
            '2017.9.12',
            '2017.9.13',
            '2017.9.14',
            '2017.9.15'

        ],
        seriesData: [
            {
                name: '处置数',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    2,
                    4,
                    6
                ]
            }, {
                name: '报警数',
                type: 'bar',
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    2,
                    5,
                    6
                ]
            }, {
                name: '处置率',
                type: 'line',
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    5,
                    3,
                    6
                ]
            }
        ]

    } //天
    var pie1Data = {
        name: '重点监管危化品',
        colorList: [
            '#98B1E2',
            '#394AD1',
            '#C400DA',
            '#F5A623',
            '#21D376',
            '#D84315',
            '#4BCEEC',
            '#F8E71C'
        ],
        data: [
            {
                value: 335,
                name: '其他'
            }, {
                value: 0,
                name: '液化石油'
            }, {
                value: 0,
                name: '甲醇'
            }, {
                value: 135,
                name: '二氧化硫'
            }, {
                value: 335,
                name: '氯'
            }, {
                value: 335,
                name: '氨'
            }, {
                value: 335,
                name: '丙烯腈'
            }, {
                value: 335,
                name: '光气'
            }
        ]
    }
    var pie2Data = {
        name: '重点监管化工工艺',
        colorList: [
            '#98B1E2',
            '#394AD1',
            '#C400DA',
            '#F5A623',
            '#21D376',
            '#D84315',
            '#4BCEEC',
            '#F8E71C'
        ],
        data: [
            {
                value: 335,
                name: '其他'
            }, {
                value: 0,
                name: '氧化工艺'
            }, {
                value: 0,
                name: '加氢工艺'
            }, {
                value: 135,
                name: '氯化工艺'
            }, {
                value: 335,
                name: '合成氨工艺'
            }, {
                value: 35,
                name: '点解工艺（氯碱）'
            }, {
                value: 335,
                name: '磺化工艺'
            }, {
                value: 35,
                name: '光气及光气化工艺'
            }
        ]
    }
    var pie3Data = {
        name: '重大的危险源',
        colorList: [
            '#21D376', '#F8E71C', '#FF7700', '#DA1C00'
        ],
        data: [
            {
                value: 335,
                name: '一级'
            }, {
                value: 0,
                name: '二级'
            }, {
                value: 0,
                name: '三级'
            }, {
                value: 135,
                name: '四级'
            }
        ]
    }
    var mySwiper = new Swiper('.swiper-container', {

        loop: true,
        autoplay: 5000,
        autoplayDisableOnInteraction: false,
        paginationClickable: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮

    })
    $('#bjqk').on('click', 'a', function() {
        $(this).addClass('on').siblings().removeClass('on')
        if (!$(this).index()) {
            showZooBar(dataMonth)
        } else {
            showZooBar(dataDay)
        }
    })
    $('#pie-hook').on('click', 'p', function() {
        $(this).addClass('on').siblings().removeClass('on')

        if (!$(this).index()) {
            showPie(pie1Data)
        }
        if ($(this).index() === 1) {
            showPie(pie2Data)
        }
        if ($(this).index() === 2) {
            showPie(pie3Data)
        }
    })

    $('#ndsg').on('click', 'a', function() {
        $(this).addClass('on').siblings().removeClass('on')
        if (!$(this).index()) {
            showBarTimeLine()
        } else {
            showlineTimeLine()
        }
    })
    $('#drbj').on('click', 'a', function() {
        $(this).addClass('on').siblings().removeClass('on')
        if (!$(this).index()) {
            $('#bj-list').show();
            $('#dou-pie').hide();

        } else {
            $('#bj-list').hide();
            $('#dou-pie').show();
            showDouPie()

        }
    })
    showZooBar(dataMonth)
    showBar2()
    showPie(pie1Data)
    showBarTimeLine()
    sbowKCharts()
    // showDouPie()
    //showlineTimeLine()
})
function showBar2() {
    var myChart = echarts.init(document.getElementById('bar2'));
    var option = {

        legend: {
            show: true,
            top: '10%',
            right: '1%',
            itemGap: 3,
            // x: 'center',
            // formatter: function(name) {
            //     console.log(name);
            // },
            data: [
                '重大隐患数', '一般隐患数', '执法检查次数', '企业自查数', '隐患整改率'

            ],
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9',
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                var str = '';

                $.each(params, function(index, el) {

                    if (!index) {
                        str += el.name + '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '<br/>';

                    } else if (index === params.length - 1) {
                        str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '%<br/>'

                    } else {
                        str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '<br/>'
                    }
                    // console.log(str);
                });
                return str
            }

        },
        grid: {
            top: '30%',
            left: '3%',
            right: '3%',
            bottom: '16%',
            containLabel: true
        },

        xAxis: {
            type: 'category',

            // boundaryGap: false,

            axisLine: {
                onZero: false,
                show: true,

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                interval: 0,
                rotate: 45,
                // formatter: function(params) {
                //
                //     if (params.length > 4) {
                //         var _name = params.substring(0, 4) + '\n' + params.substring(4, params.length);
                //         return _name;
                //     }
                //     return params
                // },
                textStyle: {
                    color: '#97B8C9'

                }

            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '2016年11月',
                '2016年12月',
                '2017年1月',
                '2017年2月',
                '2017年3月',
                '2017年4月',
                '2017年5月',
                '2017年6月',
                '2017年7月',
                '2017年8月',
                '2017年9月',
                '2017年10月'
            ]
        },
        yAxis: [

            {
                type: 'value',
                name: '',
                splitNumber: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {

                    show: true,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    }

                }
            }, {
                type: 'value',
                name: '',
                min: 0,
                max: 100,
                splitNumber: 5,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {

                    show: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    },
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '重大隐患数',
                type: 'bar',
                stack: 1,
                itemStyle: {
                    normal: {
                        color: '#ED302E'

                    }
                },
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2
                ]

            }, {
                name: '一般隐患数',
                type: 'bar',
                stack: 1,
                itemStyle: {
                    normal: {
                        color: '#F5A623'

                    }
                },
                data: [
                    1,
                    22,
                    2,
                    3,
                    22,
                    2,
                    1,
                    22,
                    2,
                    3,
                    22,
                    2
                ]

            }, {
                name: '执法检查次数',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#0899FF'
                    }
                },
                data: [
                    11,
                    122,
                    12,
                    321,
                    23,
                    13,
                    11,
                    122,
                    12,
                    321,
                    23,
                    13
                ]

            }, {
                name: '企业自查数',
                type: 'bar',

                itemStyle: {
                    normal: {
                        color: '#7630ED'
                    }
                },
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    1,
                    22,
                    2,
                    5,
                    3,
                    22
                ]

            }, {
                name: '隐患整改率',
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#fff'
                    }
                },
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    1,
                    22,
                    2,
                    5,
                    3,
                    22
                ]

            }
        ]
    };

    myChart.setOption(option);
    myChart.on('click', function(params) {
        if (params.componentSubType === 'line') {
            return
        }
        console.log(params.seriesName, params.name);
        showPie2()
    })

}

function showZooBar(cfg) {

    var myChart = echarts.init(document.getElementById('zoom-bar'));
    var legendData = [];
    var _series = [];
    $.each(cfg.seriesData, function(index, el) {
        legendData.push(el.name)
        if (el.type === 'line') {
            var _seriesObject = {
                name: el.name,
                type: el.type,
                yAxisIndex: 1,
                data: el.data
            }
            _series.push(_seriesObject)
        } else {
            var _seriesObject = {
                name: el.name,
                barWidth: '10',
                type: el.type,
                stack: 1,
                data: el.data

            }
            _series.push(_seriesObject)
        }

    });

    var option = {

        legend: {
            show: true,
            top: '22%',
            left: '6%',
            itemGap: 3,
            // x: 'center',
            // formatter: function(name) {
            //     console.log(name);
            // },
            data: legendData,
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9',
                fontSize: 12
            }
        },
        dataZoom: {
            type: 'slider',
            end: 50,
            backgroundColor: 'rgba(9,75,127,.2)',
            fillerColor: 'rgba(9,75,127,.6)',
            borderColor: '#094B80',
            bottom: '6',
            top: '178',
            handleStyle: {
                color: '#094B80'
            },
            textStyle: {
                color: '#97B8C9'
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                var str = '';

                $.each(params, function(index, el) {

                    if (!index) {
                        str += el.name + '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '<br/>';

                    } else if (index === params.length - 1) {
                        str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '%<br/>'

                    } else {
                        str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + el.color + '"></span>' + el.seriesName + ' : ' + el.data + '<br/>'
                    }
                    // console.log(str);
                });
                return str
            }

        },
        grid: {
            top: '35%',
            left: '3%',
            right: '3%',
            bottom: '22%',
            containLabel: true
        },

        xAxis: {
            type: 'category',

            // boundaryGap: false,

            axisLine: {
                onZero: false,
                show: true,

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                interval: 0,
                rotate: 45,
                // formatter: function(params) {
                //
                //     if (params.length > 4) {
                //         var _name = params.substring(0, 4) + '\n' + params.substring(4, params.length);
                //         return _name;
                //     }
                //     return params
                // },
                textStyle: {
                    color: '#97B8C9'

                }

            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: cfg.xAxis
        },
        yAxis: [

            {
                type: 'value',
                name: '',
                splitNumber: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {

                    show: true,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    }

                }
            }, {
                type: 'value',
                name: '',
                min: 0,
                max: 100,
                splitNumber: 5,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {

                    show: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    },
                    formatter: '{value}%'
                }
            }
        ],
        color: [
            '#7630ED', '#EB3432', '#fff'
        ],
        // series: [
        //     {
        //         name: '处置数',
        //         type: 'bar',
        //         stack: 1,
        //         data: [
        //             1,
        //             22,
        //             2,
        //             3,
        //             22,
        //             2,
        //             1,
        //             22,
        //             2,
        //             3,
        //             22,
        //             2
        //         ]
        //
        //     }, {
        //         name: '报警数',
        //         type: 'bar',
        //         stack: 1,
        //         barWidth: 10,
        //          itemStyle: {
        //              normal: {
        //                  color: '#EB3432'
        //
        //              }
        //          },
        //         data: [
        //             1,
        //             22,
        //             2,
        //             3,
        //             22,
        //             2,
        //             1,
        //             22,
        //             2,
        //             3,
        //             22,
        //             2
        //         ]
        //
        //     }, {
        //         name: '处置率',
        //         type: 'line',
        //         yAxisIndex: 1,
        //
        //          itemStyle: {
        //              normal: {
        //                  color: '#fff'
        //              }
        //          },
        //         data: [
        //             1,
        //             22,
        //             2,
        //             5,
        //             3,
        //             22,
        //             1,
        //             22,
        //             2,
        //             5,
        //             3,
        //             22
        //         ]
        //
        //     }
        // ]
        series: _series
    };

    myChart.setOption(option);
    myChart.on('click', function(params) {
        if (params.componentSubType === 'line') {
            return
        }
        console.log(params.seriesName, params.name);
        showPie2()
    })

}

function showPie(cfg) {
    var myChart = echarts.init(document.getElementById("pie"));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
        //     orient: 'vertical',
        //     bottom: '5px',
        //     left: '6%',
        //     top: '30%',
        //     itemWidth: 14,
        //     itemHeight: 8,
        //     textStyle: {
        //         color: '#97B8C9',
        //         fontSize: 12
        //     },
        //
        //     data: ['一级', '二级', '三级', '未定级']
        // },
        // tooltip: {
        //     formatter: '{b} {d}%'
        // },
        color: cfg.colorList,
        series: [
            {
                name: cfg.name,
                type: 'pie',
                // minAngle: 10,

                radius: [
                    '26%', '50%'
                ],
                center: [
                    '64%', '50%'
                ],
                // avoidLabelOverlap: false,

                label: {
                    normal: {
                        // formatter: '{b} \n {d}%',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            color: '#97B8C9'
                        }

                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            // fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: cfg.data
            }
        ]
    };

    myChart.setOption(option);

}

function showBarTimeLine() { //事故起数分类

    var myChart = echarts.init(document.getElementById('bar-timeLine'));
    myChart.clear()
    var option = {
        baseOption: {
            tooltip: {
                // trigger: 'axis'
            },
            // legend: {
            //     itemWidth: 14,
            //     top: '8%',
            //     x: '33%',
            //     itemHeight: 8,
            //     textStyle: {
            //         color: '#97B8C9'
            //     },
            //     itemGap: 8,
            //     data: [
            //
            //         '一级',
            //         '二级',
            //         '三级',
            //         '未定级',
            //         '标准化',
            //         '诚信'
            //     ]
            // },
            timeline: {
                axisType: 'category',
                orient: 'horizontal',
                autoPlay: true,
                inverse: true,
                playInterval: 5000,
                symbol: 'image://./src/img/time-line-icon.png',
                symbolSize: 10,
                left: null,
                right: 5,
                height: null,
                right: 20,
                top: '92%',
                bottom: 10,
                width: 280,
                label: {
                    normal: {
                        textStyle: {
                            color: '#4BCEEC'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#97B8C9'
                        }
                    }
                },

                lineStyle: {
                    width: 1,
                    color: '#4BCEEC',
                    type: 'dotted'
                },
                checkpointStyle: {
                    symbol: 'image://./src/img/checkpoint-style-icon.png'
                },
                // checkpointStyle: {
                //     color: '#bbb',
                //     borderColor: '#777',
                //     borderWidth: 1
                // },
                controlStyle: {
                    show: false,
                    showNextBtn: false,
                    showPrevBtn: false,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                itemStyle: {},
                data: ['2017', '2016', '2015', '2014', '2013']
            },
            grid: {
                top: '42%',
                left: '50%',
                right: '3%',
                bottom: '33%',
                // containLabel: true
            },
            yAxis: [
                {
                    type: 'value',
                    // interval: 0,
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    axisLine: {
                        show: false,

                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#1178C9'
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: '#97B8C9'

                        },
                        formatter: '{value} '
                    }
                }

            ],
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#1178C9'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#97B8C9'

                        },
                        formatter: function(params) {
                            if (params.length > 7) {
                                return params.substring(0, 7) + '\n' + params.substring(7, params.length)
                            }
                            return params
                        }

                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#1178C9'
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    data: [
                        '重大\n危险源', '重点\n危化品', '重点化\n工工艺'
                    ],
                    // axisTick: {
                    //     alignWithLabel: true
                    // }
                }

            ],
            // tooltip: {
            //     trigger: 'item',
            //     formatter: "{a} <br/>{b} : {c} ({d}%)"
            // },
            // backgroundColor: '#fff',
            series: [
                {
                    name: '事故起数分类',
                    type: 'bar',
                    stack: 2,
                    barWidth: 12,
                    itemStyle: {
                        normal: {
                            color: function(value) {
                                var coloeList = ['#EB3432', '#0899FF', '#21D376']
                                return coloeList[value.dataIndex]

                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    }
                }, {
                    name: '事故起数分类',
                    type: 'pie',
                    tooltip: {
                        formatter: '{a}<br/> {b}:{c}({d}%)'
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'inner',
                            formatter: '{d}%  '
                        }
                    },
                    radius: [
                        '30%', '50%'
                    ],
                    center: [
                        '26%', '58%'
                    ],

                    z: 100
                }
            ],
            // color: ['#3157EC', '#00A77B', '#F1951F', '#9C9C9C']
        },
        options: [
            { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [10, 52, 334]
                    }, {
                        data: [
                            {
                                name: '物体打击',
                                value: 23
                            }, {
                                name: '车辆伤害',
                                value: 23
                            }, {
                                name: '机械伤害',
                                value: 23
                            }, {
                                name: '起重伤害',
                                value: 23
                            }, {
                                name: '触电',
                                value: 23
                            }, {
                                name: '淹溺',
                                value: 23
                            }, {
                                name: '灼烫',
                                value: 23
                            }, {
                                name: '火灾',
                                value: 23
                            }, {
                                name: '高处坠落',
                                value: 23
                            }, {
                                name: '坍塌',
                                value: 23
                            }, {
                                name: '冒顶片帮',
                                value: 23
                            }, {
                                name: '透水',
                                value: 23
                            }, {
                                name: '放炮',
                                value: 23
                            }, {
                                name: '火药爆炸',
                                value: 23
                            }, {
                                name: '瓦斯爆炸',
                                value: 23
                            }, {
                                name: '锅炉爆炸',
                                value: 23
                            }, {
                                name: '容器爆炸',
                                value: 23
                            }, {
                                name: '其他爆炸',
                                value: 23
                            }, {
                                name: '中毒和窒息',
                                value: 23
                            }, {
                                name: '其他伤害',
                                value: 23
                            }

                        ]
                    }
                ]
            }, { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [200, 34, 30]
                    }, {
                        data: [
                            {
                                name: '物体打击',
                                value: 123
                            }, {
                                name: '车辆伤害',
                                value: 123
                            }, {
                                name: '机械伤害',
                                value: 123
                            }, {
                                name: '起重伤害',
                                value: 123
                            }, {
                                name: '触电',
                                value: 23
                            }, {
                                name: '淹溺',
                                value: 23
                            }, {
                                name: '灼烫',
                                value: 23
                            }, {
                                name: '火灾',
                                value: 23
                            }, {
                                name: '高处坠落',
                                value: 23
                            }, {
                                name: '坍塌',
                                value: 23
                            }, {
                                name: '冒顶片帮',
                                value: 23
                            }, {
                                name: '透水',
                                value: 23
                            }, {
                                name: '放炮',
                                value: 23
                            }, {
                                name: '火药爆炸',
                                value: 23
                            }, {
                                name: '瓦斯爆炸',
                                value: 23
                            }, {
                                name: '锅炉爆炸',
                                value: 23
                            }, {
                                name: '容器爆炸',
                                value: 23
                            }, {
                                name: '其他爆炸',
                                value: 23
                            }, {
                                name: '中毒和窒息',
                                value: 23
                            }, {
                                name: '其他伤害',
                                value: 23
                            }

                        ]
                    }
                ]
            }, { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [120, 90, 330]
                    }, {
                        data: [
                            {
                                name: '物体打击',
                                value: 23
                            }, {
                                name: '车辆伤害',
                                value: 223
                            }, {
                                name: '机械伤害',
                                value: 23
                            }, {
                                name: '起重伤害',
                                value: 23
                            }, {
                                name: '触电',
                                value: 23
                            }, {
                                name: '淹溺',
                                value: 23
                            }, {
                                name: '灼烫',
                                value: 23
                            }, {
                                name: '火灾',
                                value: 23
                            }, {
                                name: '高处坠落',
                                value: 23
                            }, {
                                name: '坍塌',
                                value: 123
                            }, {
                                name: '冒顶片帮',
                                value: 23
                            }, {
                                name: '透水',
                                value: 23
                            }, {
                                name: '放炮',
                                value: 23
                            }, {
                                name: '火药爆炸',
                                value: 23
                            }, {
                                name: '瓦斯爆炸',
                                value: 23
                            }, {
                                name: '锅炉爆炸',
                                value: 23
                            }, {
                                name: '容器爆炸',
                                value: 123
                            }, {
                                name: '其他爆炸',
                                value: 23
                            }, {
                                name: '中毒和窒息',
                                value: 23
                            }, {
                                name: '其他伤害',
                                value: 23
                            }

                        ]
                    }
                ]
            }, { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [10, 52, 334]
                    }, {
                        data: [
                            {
                                name: '物体打击',
                                value: 23
                            }, {
                                name: '车辆伤害',
                                value: 23
                            }, {
                                name: '机械伤害',
                                value: 323
                            }, {
                                name: '起重伤害',
                                value: 23
                            }, {
                                name: '触电',
                                value: 23
                            }, {
                                name: '淹溺',
                                value: 23
                            }, {
                                name: '灼烫',
                                value: 23
                            }, {
                                name: '火灾',
                                value: 23
                            }, {
                                name: '高处坠落',
                                value: 23
                            }, {
                                name: '坍塌',
                                value: 423
                            }, {
                                name: '冒顶片帮',
                                value: 23
                            }, {
                                name: '透水',
                                value: 23
                            }, {
                                name: '放炮',
                                value: 23
                            }, {
                                name: '火药爆炸',
                                value: 23
                            }, {
                                name: '瓦斯爆炸',
                                value: 23
                            }, {
                                name: '锅炉爆炸',
                                value: 23
                            }, {
                                name: '容器爆炸',
                                value: 23
                            }, {
                                name: '其他爆炸',
                                value: 23
                            }, {
                                name: '中毒和窒息',
                                value: 23
                            }, {
                                name: '其他伤害',
                                value: 23
                            }

                        ]
                    }
                ]
            }, { // 这是'2017/02' 对应的 option
                // title: {
                //     text: '2017年1月份库存占比'
                // },
                series: [
                    {
                        data: [10, 52, 334]
                    }, {
                        data: [
                            {
                                name: '物体打击',
                                value: 323
                            }, {
                                name: '车辆伤害',
                                value: 23
                            }, {
                                name: '机械伤害',
                                value: 23
                            }, {
                                name: '起重伤害',
                                value: 23
                            }, {
                                name: '触电',
                                value: 23
                            }, {
                                name: '淹溺',
                                value: 23
                            }, {
                                name: '灼烫',
                                value: 23
                            }, {
                                name: '火灾',
                                value: 233
                            }, {
                                name: '高处坠落',
                                value: 23
                            }, {
                                name: '坍塌',
                                value: 23
                            }, {
                                name: '冒顶片帮',
                                value: 23
                            }, {
                                name: '透水',
                                value: 23
                            }, {
                                name: '放炮',
                                value: 23
                            }, {
                                name: '火药爆炸',
                                value: 23
                            }, {
                                name: '瓦斯爆炸',
                                value: 23
                            }, {
                                name: '锅炉爆炸',
                                value: 23
                            }, {
                                name: '容器爆炸',
                                value: 23
                            }, {
                                name: '其他爆炸',
                                value: 23
                            }, {
                                name: '中毒和窒息',
                                value: 23
                            }, {
                                name: '其他伤害',
                                value: 233
                            }

                        ]
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);

}

function showlineTimeLine() { //事故伤亡情况
    var myChart = echarts.init(document.getElementById('bar-timeLine'));
    myChart.clear()
    var option = {
        baseOption: {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                itemWidth: 14,
                top: '29%',
                x: 'center',
                itemHeight: 8,
                textStyle: {
                    color: '#97B8C9'
                },
                itemGap: 8,
                data: ['事故起数', '死亡人数', '重伤人数', '轻伤人数']
            },
            timeline: {
                axisType: 'category',
                orient: 'horizontal',
                autoPlay: true,
                inverse: true,
                playInterval: 5000,
                symbol: 'image://./src/img/time-line-icon.png',
                symbolSize: 10,
                left: null,
                right: 5,
                height: null,
                right: 20,
                top: '92%',
                bottom: 10,
                width: 280,
                label: {
                    normal: {
                        textStyle: {
                            color: '#4BCEEC'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#97B8C9'
                        }
                    }
                },

                lineStyle: {
                    width: 1,
                    color: '#4BCEEC',
                    type: 'dotted'
                },
                checkpointStyle: {
                    symbol: 'image://./src/img/checkpoint-style-icon.png'
                },
                // checkpointStyle: {
                //     color: '#bbb',
                //     borderColor: '#777',
                //     borderWidth: 1
                // },
                controlStyle: {
                    show: false,
                    showNextBtn: false,
                    showPrevBtn: false,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                itemStyle: {},
                data: ['2017年', '2016年', '2015年', '2014年']
            },
            grid: {
                top: '42%',
                left: '16%',
                right: '8%',
                bottom: '23%',
                // containLabel: true
            },
            yAxis: [
                {
                    type: 'value',
                    // interval: 0,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    axisLine: {
                        show: true,

                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#1178C9'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#97B8C9'

                        },
                        formatter: '{value} '
                    }
                }

            ],
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#1178C9'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#97B8C9'

                        },
                        formatter: function(params) {
                            if (params.length > 7) {
                                return params.substring(0, 7) + '\n' + params.substring(7, params.length)
                            }
                            return params
                        }

                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#1178C9'
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#07274D'
                        }
                    },
                    data: [
                        '0',
                        '2',
                        '4',
                        '6',
                        '8',
                        '10',
                        '12'
                    ],
                    // axisTick: {
                    //     alignWithLabel: true
                    // }
                }

            ],
            // tooltip: {
            //     trigger: 'item',
            //     formatter: "{a} <br/>{b} : {c} ({d}%)"
            // },
            // backgroundColor: '#fff',
            series: [
                {
                    name: '事故起数',
                    type: 'line'
                }, {
                    name: '死亡人数',
                    type: 'line'
                }, {
                    name: '重伤人数',
                    type: 'line'
                }, {
                    name: '轻伤人数',
                    type: 'line'
                }
            ],
            color: ['#0899FF', '#EB3432', '#F5A623', '#FFFFFF']
        },
        options: [
            { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [
                            110,
                            152,
                            34,
                            12,
                            14,
                            15,
                            17
                        ]
                    }, {
                        data: [
                            120,
                            122,
                            324,
                            123,
                            125,
                            127,
                            129
                        ]
                    }, {
                        data: [
                            130,
                            132,
                            314,
                            133,
                            153,
                            173,
                            193
                        ]
                    }, {
                        data: [
                            10,
                            52,
                            34,
                            213,
                            115,
                            147,
                            159
                        ]
                    }
                ]
            }, { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [
                            210,
                            252,
                            334,
                            22,
                            24,
                            215,
                            27
                        ]
                    }, {
                        data: [
                            210,
                            252,
                            334,
                            22,
                            24,
                            25,
                            217
                        ]
                    }, {
                        data: [
                            210,
                            252,
                            34,
                            23,
                            25,
                            27,
                            29
                        ]
                    }, {
                        data: [
                            210,
                            252,
                            334,
                            23,
                            25,
                            27,
                            29
                        ]
                    }

                ]
            }, { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [
                            310,
                            352,
                            334,
                            312,
                            34,
                            35,
                            37
                        ]
                    }, {
                        data: [
                            310,
                            352,
                            334,
                            322,
                            34,
                            35,
                            37
                        ]
                    }, {
                        data: [
                            310,
                            352,
                            334,
                            33,
                            35,
                            37,
                            39
                        ]
                    }, {
                        data: [
                            310,
                            52,
                            334,
                            33,
                            35,
                            37,
                            39
                        ]
                    }

                ]
            }, { // 这是'2017/02' 对应的 option

                series: [
                    {
                        data: [
                            150,
                            52,
                            334,
                            25,
                            354,
                            55,
                            75
                        ]
                    }, {
                        data: [
                            150,
                            52,
                            334,
                            25,
                            42,
                            55,
                            75
                        ]
                    }, {
                        data: [
                            150,
                            52,
                            334,
                            35,
                            55,
                            75,
                            95
                        ]
                    }, {
                        data: [
                            10,
                            52,
                            334,
                            35,
                            55,
                            75,
                            95
                        ]
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);
}

function sbowKCharts() {
    var myChart = echarts.init(document.getElementById('sbowKCharts'));
    var upColor = '#ED302E';
    var upBorderColor = '#8A0000';
    var downColor = '#21D376';
    var downBorderColor = '#008F28';

    // 数据意义：开始值：，结束值，最高值，最低值
    var data0 = splitData([
        [
            '2017/1/24', 2320, 2320, 2287, 2362
        ],
        [
            '2017/1/25', 2300, 2291, 2288, 2308
        ],
        [
            '2017/1/26', 22955, 2346, 22955, 23462
        ],
        [
            '2017/1/28', 2347, 2358, 2337, 2363
        ],
        [
            '2017/1/29', 2360, 2382, 89, 2376
        ],
        [
            '2017/1/30', 3343, 3242, 3223, 43782
        ],
        [
            '2017/1/31', 2377, 2419, 2369, 2421
        ],
        [
            '2017/2/1', 2425, 24285, 2417, 2440
        ],
        [
            '2017/2/2', 2411, 2433, 2403, 2437
        ],
        [
            '2017/2/3', 24328, 2434, 2427, 2441
        ],
        [
            '2017/2/4', 2430, 2418, 2394, 2433
        ],
        [
            '2017/2/5', 2416, 2432, 2414, 2443
        ],
        [
            '2017/2/6', 2441, 2421, 2415, 2444
        ],
        [
            '2017/2/7', 2420, 2382, 2373, 2427
        ],
        [
            '2017/2/8', 2383, 2397, 2370, 2397
        ],
        [
            '2017/2/9', 2378, 2325, 2309, 2378
        ],
        [
            '2017/2/10', 2322, 2314, 2308, 2330
        ],
        [
            '2017/2/11', 2320, 2325, 2315, 2338
        ],
        [
            '2017/2/12', 2313, 2293, 2289, 2340
        ],
        [
            '2017/2/13', 2297, 2313, 2292, 2324
        ],
        [
            '2017/2/14', 2322, 2365, 2308, 2366
        ],
        [
            '2017/2/15', 2364, 2359, 2330, 2369
        ],
        [
            '2017/2/16', 2332, 2273, 2259, 2333
        ],
        [
            '2017/2/17', 2274, 2326, 227, 2328
        ]
    ]);

    function splitData(rawData) {
        var categoryData = [];
        var values = []
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i])
        }
        return {categoryData: categoryData, values: values};
    }

    function calculateMA(dayCount) {

        var result = [];
        for (var i = 0, len = data0.values.length; i < len; i++) {
            // if (i < dayCount) {
            //     result.push('-');
            //     continue;
            // }
            // var sum = 0;
            // for (var j = 0; j < dayCount; j++) {
            //     sum += data0.values[i - j][1];
            //
            // }
            var a = Math.floor(Math.random(9000 - 20 + 1) * 2000)
            console.log(a);
            result.push(a);
        }
        return result;
    }

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                console.log(params);
                return '日期：' + params.seriesName + params.name.substring(4) + '<br/>' + '日均值：' + params.value
            },
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {
            itemWidth: 14,
            top: '16%',
            x: 'center',
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9'
            },
            itemGap: 8,
            data: ['日K', '2014', '2015', '2016']
        },
        grid: {
            top: '30%',
            left: '10%',
            right: '6%',
            bottom: '20%'
        },
        color: [
            '#F8E71C', '#21D376', '#EB3432'
        ],
        xAxis: {
            type: 'category',
            data: data0.categoryData,
            scale: true,
            boundaryGap: false,
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#07274D'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisLabel: {

                textStyle: {
                    color: '#97B8C9'

                }

            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
        },
        yAxis: {
            axisLine: {
                onZero: false,
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                interval: 0,

                textStyle: {
                    color: '#97B8C9'

                }

            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            scale: true,
            // splitArea: {
            //     show: true
            // }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 50,
                end: 100
            }, {
                show: true,
                type: 'slider',

                start: 50,
                end: 100,
                backgroundColor: 'rgba(9,75,127,.2)',
                fillerColor: 'rgba(9,75,127,.6)',
                borderColor: '#094B80',
                bottom: '6',
                // top: '178',
                y: '90%',
                handleStyle: {
                    color: '#094B80'
                },
                textStyle: {
                    color: '#97B8C9'
                }
            }
        ],
        series: [
            {
                name: '日K',
                type: 'candlestick',
                data: data0.values,
                barWidth: 10,

                itemStyle: {
                    normal: {
                        color: upColor,
                        color0: downColor,
                        borderColor: upBorderColor,
                        borderColor0: downBorderColor
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        console.log(params);
                        return '日期：' + params.name + '<br/>' + '开始值：' + params.value[1] + '<br/>' + '结束值：' + params.value[2] + '<br/>' + '最高值' + params.value[3] + '<br/>' + '最低值' + params.value[4]
                    }
                }
            }, {
                name: '2014',
                type: 'line',
                data: calculateMA(5),
                smooth: true,
                lineStyle: {
                    normal: {
                        opacity: 0.5
                    }
                }
            }, {
                name: '2015',
                type: 'line',
                data: calculateMA(10),
                smooth: true,
                lineStyle: {
                    normal: {
                        opacity: 0.5
                    }
                }
            }, {
                name: '2016',
                type: 'line',
                data: calculateMA(15),
                smooth: true,
                lineStyle: {
                    normal: {
                        opacity: 0.5
                    }
                }
            }

        ]
    };

    myChart.setOption(option);

}

function showDouPie() {
    var myChart = echarts.init(document.getElementById('dou-pie'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        color: [
            '#7630ED',
            '#21D376',
            '#F8E71C',
            '#ED31FF',
            '#F60014',
            '#28335F'
        ],
        series: [
            {
                name: '报警类别',
                type: 'pie',
                selectedMode: 'single',
                radius: [
                    '10%', '30%'
                ],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 335,
                        name: '储罐',
                        itemStyle: {
                            normal: {
                                color: '#F38000'
                            }
                        }
                    }, {
                        value: 679,
                        name: '仓库',
                        itemStyle: {
                            normal: {
                                color: '#607D8B'
                            }
                        }
                    }, {
                        value: 1548,
                        name: '反应釜',
                        itemStyle: {
                            normal: {
                                color: '#006FD5'
                            }
                        }
                    }
                ]
            }, {
                name: '报警类别',
                type: 'pie',
                radius: [
                    '40%', '65%'
                ],
                label: {
                    normal: {
                        formatter: ' {b}{c}\n {d}%  ',
                        borderColor: '#aaa'
                    }
                },
                data: [
                    {
                        value: 335,
                        name: '温度'
                    }, {
                        value: 310,
                        name: '压力'
                    }, {
                        value: 234,
                        name: '流量'
                    }, {
                        value: 135,
                        name: '液位'
                    }, {
                        value: 18,
                        name: '可燃'
                    }, {
                        value: 251,
                        name: '有毒'
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);

}
